<template>
  <layout-body>
    <div>
      <el-button
        type="primary"
        @click="createClick(0)"
        v-permission="'system-config-create'"
      >
        <el-icon><Plus /></el-icon>
        添加配置项
      </el-button>
    </div>
    <!-- 列表 -->
    <el-table v-loading="initLoading" class="mt20" :data="lists" row-key="id">
      <el-table-column label="配置名称" prop="config_name">
        <template #default="scope">
          <span>{{ scope.row.config_name }}</span>
        </template></el-table-column
      >
      <el-table-column label="字段标识" prop="name_field">
        <template #default="scope">
          <span>{{ scope.row.name_field }}</span>
        </template></el-table-column
      >
      <el-table-column label="字段类型" align="center" prop="type">
        <template #default="scope">
          <span v-if="scope.row.type.name">{{
            scope.row.type.name || "--"
          }}</span>
        </template></el-table-column
      >
      <el-table-column label="表单类型" align="center" prop="input_type">
        <template #default="scope">
          <span v-if="scope.row.input_type.name">{{
            scope.row.input_type.name
          }}</span>
        </template></el-table-column
      >
      <el-table-column label="显示状态" align="center" prop="status">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status.value"
            size="small"
            :active-value="1"
            :inactive-value="0"
            :loading="scope.row.loading"
            :before-change="
              () => {
                return (scope.row.switch = true);
              }
            "
            @change="statusChange($event, scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column align="right" label="操作" width="100">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="createClick(scope.row.id)"
            v-permission="'system-config-update'"
            >编辑</el-button
          >

          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="不用了"
            icon="WarningFilled"
            icon-color="red"
            title="确定删除吗？"
            @confirm="del(scope.row.id)"
          >
            <template #reference>
              <el-button
                link
                v-permission="'system-config-delete'"
                type="primary"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="flex end">
      <el-pagination
        v-model:currentPage="listPage.page"
        :page-size="listPage.limit"
        :background="true"
        layout="total,sizes, prev, pager, next"
        :total="listPage.total"
        @size-change="changePageLimit"
        small="small"
        @current-change="changeCurPage"
        class="mt10"
      />
    </div>

    <!-- 添加 -->
    <systemConfigCreate
      ref="createComponentRef"
      @success="toInit()"
    ></systemConfigCreate>
  </layout-body>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted } from "vue";
import { listPageType, Result, ResultError } from "@/types";
import systemConfigCreate from "./create.vue";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";

import {
  getConfigList,
  updateStatusConfig,
  delConfig,
} from "@/api/system/config";
import { useConfig } from "@/store";

const router = useRouter();

const configStore = useConfig();

const { proxy } = getCurrentInstance() as any;

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref(false);
const lists = ref([]);

const tabId = ref();

const toInit = () => {
  initLoading.value = true;
  let obj: any = {};
  obj.page = listPage.page;
  obj.limit = listPage.limit;
  obj.config_tab_id = tabId.value;
  getConfigList(obj)
    .then((res: Result) => {
      lists.value = res.data.data;
      listPage.total = res.data.total;

      setTimeout(() => {
        initLoading.value = false;
      }, 300);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const statusChange = (val: any, row: any) => {
  if (row.switch === true) {
    row.loading = true;
    updateStatusConfig({
      id: row.id,
      status: val,
    })
      .then((res: Result) => {
        row.loading = false;
        toInit();
        $utils.successMsg(res.message);
      })
      .catch((err: ResultError) => {
        row.loading = false;
        toInit();
        $utils.errorMsg(err);
      });
  }
};

const listPage: listPageType = {
  total: 0,
  limit: configStore.getPageLimit,
  page: 1,
};
const changePageLimit = (val: number) => {
  listPage.limit = val;
  configStore.setPageLimit(val);
  toInit();
};

const changeCurPage = (val: number) => {
  listPage.page = val;
  toInit();
};

const createClick = (id: number | string) => {
  proxy?.$refs["createComponentRef"]?.open(id);
};

const del = (id: number) => {
  ElMessageBox.confirm("确定删除?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "提示:",
  }).then(() => {
    delConfig({
      id,
    })
      .then((res: Result) => {
        toInit();
        $utils.successMsg(res.message);
      })
      .catch((err: ResultError) => {
        $utils.errorMsg(err);
      });
  });
};

onMounted(() => {
  let query = router.currentRoute.value.query;
  if (query && query.tab_id) {
    tabId.value = String(query.tab_id);
  }
  toInit();
});

const createComponentRef = ref();
</script>